<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bar</title>
    <!-- 引入echarts外联，所以不需要安装echarts-->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.js"></script> -->
    <script src="./js/echarts.js"></script>
    <style>
      body {
        background: #2c2c2c;
      }
    </style>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div
      id="main1"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main2"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main3"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main4"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main5"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main6"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main7"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main8"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main9"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main10"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main11"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById("main1"));

      var barData_1 = {
        xAxis: [
          "万宁市",
          "海口市",
          "文昌市",
          "琼海市",
          "万宁市1",
          "海口市2",
          "文昌市3",
          "琼海市4",
          "万宁市5",
          "海口市6",
          "文昌市7",
          "琼海市8",
          "文昌市9",
          "琼海市65",
          "万宁市65",
          "海口市5236",
          "文昌市32347",
          "琼海市3458",
        ],
        unit: "(个)",
        series1: [
          2400, 1600, 1800, 3000, 3500, 2400, 1600, 1800, 3000, 3500, 2400,
          1600, 1800, 3000, 3500, 3000, 3500, 2400, 1600, 1800, 3000, 3500,
        ],
        series2: [
          2000, 1400, 1500, 2500, 3000, 2400, 1600, 1800, 3000, 3500, 2400,
          1600, 1800, 3000, 3500, 3000, 3500, 2400, 1600, 1800, 3000, 3500,
        ],
      };

      // 指定图表的配置项和数据
      var option1 = {
        color: ["#3DB7FF"],
        tooltip: {
          trigger: "axis",
          transitionDuration: 0,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: "35px",
          left: "20px",
          right: 0,
          bottom: "10px",
          containLabel: true,
        },
        yAxis: [
          {
            name: barData_1.unit,
            nameTextStyle: {
              color: "#fff",
              fontSize: 14,
              padding: [-55, 0, 0, -10],
            },
            type: "value",
            axisLabel: {
              color: "#fff",
              formatter: function (value, index) {
                if (value.length > 3) {
                  return value.substr(0, 3) + "..";
                } else {
                  return value;
                }
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(150, 164, 244, 0.1)",
              },
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            axisLabel: {
              color: "#fff",

              interval: 0, //使x轴横坐标全部显示
              // rotate: 15,
              formatter: function (value, index) {
                if (value.length > 3) {
                  return value.substr(0, 3) + "..";
                } else {
                  return value;
                }
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#96A4F4",
              },
              width: 5,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(150, 164, 244, 0.1)",
              },
            },
            data: barData_1.xAxis,
          },
        ],
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，
            show: barData_1.xAxis.length > 12 ? true : false,

            height: 12,
            xAxisIndex: [0],
            bottom: "5",
            start: 0, // 使用dataZoomStart设置start属性
            end: barData_1.xAxis.length > 12 ? 30 : 100, // 使用dataZoomEnd设置end属性
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",

            // show: true,
            // xAxisIndex:[0],//表示x轴折叠
            // start:1,//数据窗口范围的起始百分比,表示1%
            // end:35,//数据窗口范围的结束百分比,表示35%坐标
            // startValue: 0, // 从头开始。
            // endValue: 5, // 一次性展示5个。
            // bottom:"5",
          },
        ],
        series: [
          {
            name: "已巡查",
            type: "bar",
            barWidth: "15px",
            data: barData_1.series1,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: "rgba(9,249,189,.1)" }, // 100% 处的颜色
                    { offset: 1, color: "rgba(9,249,189,1)" }, // 0% 处的颜色
                  ],
                  globalCoord: false, // 缺省为 false
                },
                label: {
                  show: false,
                },
              },
            },
          },
          {
            name: "未巡查",
            type: "bar",
            barWidth: "15px",
            data: barData_1.series2,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: "rgba(158,158,53,.1)" }, // 100% 处的颜色
                    { offset: 1, color: "rgba(158,158,53,1)" }, // 0% 处的颜色
                  ],
                  globalCoord: false, // 缺省为 false
                },
                label: {
                  show: false,
                },
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);

      // 基于准备好的dom，初始化echarts实例
      var myChart2 = echarts.init(document.getElementById("main2"));
      var barData_2 = {
        xAxis: ["散户", "家庭农场", "合作社", "经营企业", "种养殖大户"],
        series: [6, 1, 3, 4, 2],
        unit: "个",
      };
      var option2 = {
        color: ["#3DB7FF"],
        tooltip: {
          trigger: "axis",
          transitionDuration: 0,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: 10,
          left: "20px",
          right: "40px",
          bottom: "10px",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
            name: barData_2.unit,
            // interval: 1,
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
              padding: [10, 0, 0, 0],
            },
            axisLabel: {
              color: "#fff",
              // formatter: '{value} ' + unit
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(150, 164, 244, 0.1)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            axisLabel: {
              color: "#fff",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#96A4F4",
              },
              width: 5,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(150, 164, 244, 0.1)",
              },
            },
            data: barData_2.xAxis,
          },
        ],
        series: [
          {
            type: "bar",
            stack: "vistors",
            barWidth: "15px",
            data: barData_2.series,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: "rgba(61,183,255,.1)" }, // 100% 处的颜色
                    { offset: 1, color: "rgba(61,183,255,1)" }, // 0% 处的颜色
                  ],
                  globalCoord: false, // 缺省为 false
                },
                label: {
                  show: false,
                },
              },
            },
          },
        ],
      };
      myChart2.setOption(option2);

      // 基于准备好的dom，初始化echarts实例
      var myChart3 = echarts.init(document.getElementById("main3"));
      var barData_3 = {
        xAxis: ["万宁市", "三亚市", "文昌市", "琼海市"],
        series: [3000, 4800, 3200, 1840, 3800],
        unit: "个",
      };
      var option3 = {
        color: ["#3DB7FF"],
        tooltip: {
          trigger: "axis",
          transitionDuration: 0,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: "35px",
          left: "20px",
          right: 0,
          bottom: "10px",
          containLabel: true,
        },
        yAxis: [
          {
            name: barData_3.unit,
            nameTextStyle: {
              color: "#fff",
              fontSize: 14,
              padding: [-55, 0, 0, -10],
            },
            type: "value",
            axisLabel: {
              color: "#fff",
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(150, 164, 244, 0.1)",
              },
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            axisLabel: {
              color: "#fff",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#96A4F4",
              },
              width: 5,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(150, 164, 244, 0.1)",
              },
            },
            data: barData_3.xAxis,
          },
        ],
        series: [
          {
            type: "bar",
            stack: "vistors",
            barWidth: "15px",
            data: barData_3.series,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: "rgba(61,183,255,.1)" }, // 100% 处的颜色
                    { offset: 1, color: "rgba(61,183,255,1)" }, // 0% 处的颜色
                  ],
                  globalCoord: false, // 缺省为 false
                },
                label: {
                  show: false,
                },
              },
            },
          },
        ],
      };
      myChart3.setOption(option3);

      // 基于准备好的dom，初始化echarts实例
      var myChart4 = echarts.init(document.getElementById("main4"));
      var barData_4 = {
        xAxis: ["万宁市", "三亚市", "文昌市", "琼海市"],
        series: [3000, 4800, 3200, 1840, 3800],
        unit: "个",
      };
      var myColor = ["#09CCFC"];
      var option4 = {
        tooltip: {
          trigger: "axis",
          transitionDuration: 0,
          //  axisPointer: {type: 'shadow'},
        },
        grid: {
          left: "20px",
          right: "0",
          bottom: "10px",
          top: "35px",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: barData_4.xAxis,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#306269",
                width: 2,
                type: "solid",
                opacity: 0.8,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(255,255,255,1)",
              },
            },
          },
        ],
        yAxis: [
          {
            name: barData_4.unit,
            nameTextStyle: {
              fontSize: 12,
              padding: [0, 0, 0, -25],
              color: "#FFFFFF",
            },
            type: "value",
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value}",
              textStyle: {
                color: "rgba(255,255,255,1)",
              },
            },
            axisTick: {
              show: false,
            },
            splitNumber: 3,
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.05)",
              },
            },
          },
        ],
        series: [
          {
            type: "pictorialBar",
            symbol: "path://M35,0L35,70L0,70z M35,0L35,70L70,70z",
            data: barData_4.series,
            barWidth: "45%", //柱子宽度
            itemStyle: {
              normal: {
                color: (params) => {
                  var num = myColor.length;
                  return {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0.5,
                        color: myColor[params.dataIndex % num],
                      },
                      {
                        offset: 1,
                        color: "rgba(255,255,255,0)",
                      },
                    ],
                  };
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}",
                color: "#fff",
              },
            },
          },
        ],
      };
      myChart4.setOption(option4);

      // 基于准备好的dom，初始化echarts实例
      var myChart5 = echarts.init(document.getElementById("main5"));
      var barData_5 = [
        {
          areaName: "宝应县",
          count: 40,
        },
        {
          areaName: "安宜镇",
          count: 20,
        },
        {
          areaName: "氾水镇",
          count: 10,
        },
        {
          areaName: "山阳镇",
          count: 10,
        },
        {
          areaName: "曹甸镇",
          count: 5,
        },
      ];
      var obj = {
        xData: [],
        yData: [],
      };
      for (let i = 0; i < barData_5.length; i++) {
        obj.xData.push(barData_5[i].areaName);
        obj.yData.push(barData_5[i].count);
      }
      var option5 = {
        backgroundColor: "#08173600",
        grid: {
          left: "26%",
          right: "20%",
          top: "15%",
          bottom: "8%",
          // width: 250,
        },
        xAxis: [
          {
            splitLine: {
              show: false,
            },
            type: "value",
            show: false,
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
            type: "category",
            axisTick: {
              show: false,
            },
            inverse: true,
            data: obj.xData,
            axisLabel: {
              color: "#fff", // 地点颜色
              fontSize: 10,
            },
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "10",
              },
              formatter: function (value) {
                return value + "户";
              },
            },
            data: obj.yData,
          },
        ],
        series: [
          {
            name: obj.yName,
            type: "bar",
            barWidth: 5, // 柱子宽度
            showBackground: true,
            MaxSize: 0,
            backgroundStyle: {
              color: "#7F9295",
            },
            label: {
              show: false,
            },
            itemStyle: {
              barBorderRadius: [20, 20, 20, 20], // 圆角（左上、右上、右下、左下）
              color: "#C2FFFA",
            },
            data: obj.yData,
          },
        ],
      };
      myChart5.setOption(option5);

      // 基于准备好的dom，初始化echarts实例
      var myChart6 = echarts.init(document.getElementById("main6"));
      let barData_6data0 = [0, 1586, 1635, 1600, 1500, 1400, 1100];
      let barData_6data1 = [2000, 405, 156, 135, 100, 100, 300];
      let barData_6xLabel = [
        "总计",
        "夜蛾",
        "舟蛾",
        "周蛾",
        "夜蛾",
        "夜蛾",
        "金龟",
      ];

      var option6 = {
        grid: {
          left: "0%",
          right: "0%",
          bottom: "3%",
          top: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          splitLine: { show: false },
          data: barData_6xLabel,
          axisLabel: {
            color: "#fff",
            fontSize: 10,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            type: "bar",
            stack: "总量",
            itemStyle: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(0,0,0,0)",
            },
            data: barData_6data0,
          },
          {
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "inside",
            },
            data: barData_6data1,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  var colorList = [
                    "#00A2FF",
                    "#5248E4",
                    "#F35F7F",
                    "#F18E1C",
                    "#20D9AA",
                    "#20D9AA",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      myChart6.setOption(option6);

      // 基于准备好的dom，初始化echarts实例
      var myChart7 = echarts.init(document.getElementById("main7"));
      var barData_7 = [
        {
          label: "鸡",
          price: 19,
        },
        {
          label: "鸭",
          price: 14,
        },
        {
          label: "鹅",
          price: 30,
        },
        {
          label: "猪",
          price: 46,
        },
        {
          label: "牛",
          price: 120,
        },
        {
          label: "羊",
          price: 78,
        },
      ];

      const xData7 = barData_7.map((item) => item.label);
      const yData7 = barData_7.map((item) => item.price);

      var option7 = {
        xAxis: {
          type: "category",
          data: xData7,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#65ABE7",

              fontSize: 14,
            },
          },
        },
        yAxis: {
          type: "value",
          name: "价格(斤/元)",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#65ABE7",

              fontSize: 12,
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(101, 198, 231, 0.2)",
            },
          },
          nameTextStyle: {
            color: "#65ABE7",
          },
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "8%",
          top: "20%",
          containLabel: true,
        },
        series: [
          {
            data: yData7,
            type: "bar",
            barCategoryGap: "60%",
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#3EA1FF",
                },
                {
                  offset: 1,
                  color: "#1E5C75",
                },
              ],
            },
            itemStyle: {
              barBorderRadius: 6,
            },
            label: {
              show: true,
              formatter: "{c}",
              position: "top",
              color: "#fff",
            },
          },
        ],
      };
      myChart7.setOption(option7);

      // 基于准备好的dom，初始化echarts实例
      var myChart8 = echarts.init(document.getElementById("main8"));
      let rgbColors = [
        "238,165,0",
        "61,183,255",
        "59,255,235",
        "255,79,74",
        "255,79,74",
        "0,59,252",
        "0,255,180",
      ];
      var barData_8 = [
        { name: "省级", num: 42 },
        { name: "市级", num: 60 },
        { name: "县级", num: 151 },
      ];

      let dataX = barData_8
        .map((i) => {
          return i.name;
        })
        .reverse(); //名称
      let dataY = barData_8
        .map((i) => {
          return i.num;
        })
        .reverse(); //数据
      var option8 = {
        grid: {
          top: "10%",
          right: "10%",
          left: "10%",
          bottom: "15%",
        },

        tooltip: {
          show: true, // 显示提示框
          formatter: function (params) {
            // 格式化提示框内容，显示数据信息
            return `${params.name}：${params.value}个`;
          },
        },
        xAxis: [
          {
            type: "value",

            data: dataY,
            axisLine: {
              lineStyle: {
                color: "#254454",
              },
            },
            axisLabel: {
              interval: 0,
              margin: 10,
              color: "#fff",
              textStyle: {
                fontSize: 12,
              },
            },
            axisTick: {
              //刻度
              show: false,
            },

            splitLine: {
              // 网格线
              show: true,
              lineStyle: {
                //分割线
                color: "#264454",
                width: 1,
                type: "solid", //dotted：虚线 solid:实线
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            data: dataX,

            axisLabel: {
              formatter: ["{value}", "{b| ▶}"].join(""),

              rich: {
                b: {
                  fontSize: 10,
                  color: `#48a1d2`,
                },
              },

              // formatter: "{value} ▶",
              color: "#fff",
              textStyle: {
                fontSize: 12,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#254454",
              },
            },
            splitLine: {
              // 网格线
              show: false,
              lineStyle: {
                //分割线
                color: "#3EA1FF",
                width: 1,
                type: "solid", //dotted：虚线 solid:实线
              },
            },
          },
        ],
        series: [
          {
            type: "bar",

            label: {
              show: true,
              color: function (params) {
                var colorarrays = [
                  "#5119e4",
                  "#fd6975",
                  "#dbdaad",
                  "#7f99ea",
                  "#3c05fa",
                  "#9c65f4",
                  "#32a78e",
                  "#3ad94d",
                  "#748259",
                  "#b629e0",
                  "#abde87",
                  "#6edaf4",
                ];
                return colorarrays[params.dataIndex];
              },
              position: "right",
              formatter: "{c}个", // 在右侧显示数量和百分比
            },

            data: dataY,
            barWidth: "16",
            lineStyle: {
              color: "red", // 设置XY参考线的颜色为红色
              type: "solid", // 设置XY参考线的类型为实线
            },

            itemStyle: {
              color: function (params) {
                var colorarrays = [
                  "#5119e4",
                  "#fd6975",
                  "#dbdaad",
                  "#7f99ea",
                  "#3c05fa",
                  "#9c65f4",
                  "#32a78e",
                  "#3ad94d",
                  "#748259",
                  "#b629e0",
                  "#abde87",
                  "#6edaf4",
                ];
                return colorarrays[params.dataIndex];
              },
            },

            itemStyle: {
              normal: {
                color: (params) => {
                  // 循环预设颜色数组
                  // if(params.dataIndex >= rgbColors .length) params.dataIndex = params.dataIndex % rgbColors .length;
                  // 颜色渐变，右/下/左/上，从下往上渐变

                  return new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                    {
                      offset: 0,
                      color: `rgba(${rgbColors[params.dataIndex]}, 1)`,
                    },
                    {
                      offset: 1,
                      color: `rgba(${rgbColors[params.dataIndex]}, .1)`,
                    },
                  ]);
                },
              },
            },

            // itemStyle: {
            //   normal: {

            //     color: new this.$echarts.graphic.LinearGradient(
            //       1,
            //       0,
            //       0,
            //       1,
            //       [
            //         {
            //           offset: 0,
            //           color: "#3EA1FF", // 0% 处的颜色
            //         },
            //         {
            //           offset: 0.98,
            //           color: "#107BB820", // 100% 处的颜色
            //         },
            //       ],
            //       false
            //     ),
            //   },
            // },
          },
        ],
      };
      myChart8.setOption(option8);

      // 基于准备好的dom，初始化echarts实例
      var myChart9 = echarts.init(document.getElementById("main9"));
      var barData_9 = [
        {
          companyNum: 486,
          areaName: "安宜镇",
        },
        {
          companyNum: 382,
          areaName: "氾水镇",
        },
        {
          companyNum: 479,
          areaName: "夏集镇",
        },
        {
          companyNum: 400,
          areaName: "柳堡镇",
        },
        {
          companyNum: 449,
          areaName: "射阳湖镇",
        },
        {
          companyNum: 337,
          areaName: "广洋湖镇",
        },
        {
          companyNum: 249,
          areaName: "鲁垛镇",
        },
        {
          companyNum: 127,
          areaName: "小官庄镇",
        },

        {
          companyNum: 296,
          areaName: "望直港镇",
        },

        {
          companyNum: 330,
          areaName: "曹甸镇",
        },
        {
          companyNum: 203,
          areaName: "西安丰镇",
        },

        {
          companyNum: 332,
          areaName: "山阳镇",
        },

        {
          companyNum: 381,
          areaName: "泾河镇",
        },
        {
          companyNum: 105,
          areaName: "黄塍镇",
        },
        {
          companyNum: 295,
          areaName: "泾河镇",
        },
      ];

      let dataX9 = []; //名称
      let dataY9 = []; //数据
      for (let i = 0; i < barData_9.length; i++) {
        dataX9.push(barData_9[i].areaName);
        dataY9.push(barData_9[i].companyNum);
      }
      let zoomShow = false;
      if (dataY9.length > 6) {
        zoomShow = true;
      } else {
        zoomShow = false;
      }
      var option9 = {
        grid: {
          top: "8%",
          right: "8%",
          left: "9%",
          bottom: "22%",
        },
        tooltip: {
          confine: true,
          textStyle: {
            fontSize: 10, // 字体大小
          },
        },
        xAxis: [
          {
            type: "category",
            data: dataX9,
            axisLabel: {
              interval: 0,
              margin: 10,
              color: "#fff",
              textStyle: {
                fontSize: 10,
              },
            },
            axisTick: {
              //刻度
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(98,162,205, .3)",
                type: "dashed", // 设置水平线样式为虚线
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              padding: [3, 0, 0, 0],
              formatter: "{value}",
              color: "#fff",
              textStyle: {
                fontSize: 11,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(66, 192, 255, 0)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(98,162,205, .3)",
                type: "dashed", // 设置水平线样式为虚线
              },
            },
          },
        ],
        dataZoom: [
          //滚动条
          {
            show: zoomShow,
            type: "slider",
            realtime: true,
            startValue: 0,
            endValue: 10,
            xAxisIndex: [0],
            bottom: "10",
            left: "30",
            height: 10,
            borderColor: "rgba(0,0,0,0)",
            textStyle: {
              color: "#05D5FF",
            },
          },
        ],
        series: [
          {
            type: "bar",

            label: {
              show: true,
              color: "#00D2FF",
              position: "top",
              formatter: "{c}", // 在右侧显示数量和百分比
            },

            data: dataY9,
            barWidth: "10",
            itemStyle: {
              normal: {
                borderColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#3EA1FF", // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "#3EA1FF", // 0% 处的颜色
                    },
                    {
                      offset: 0.98,
                      color: "#3EA1FF00", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#ffffff", // 0% 处的颜色
                    },
                    {
                      offset: 0.02,
                      color: "#ffffff", // 0% 处的颜色
                    },
                    {
                      offset: 0.02,
                      color: "#3EA1FF", // 0% 处的颜色
                    },
                    {
                      offset: 0.98,
                      color: "#3EA1FF00", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      myChart9.setOption(option9);

      // 基于准备好的dom，初始化echarts实例
      var myChart10 = echarts.init(document.getElementById("main10"));
      var barData_10 = [
        {
          year: "2016",
          value: 506.3,
        },
        {
          year: "2017",
          value: 574.9,
        },
        {
          year: "2018",
          value: 630.5,
        },
        {
          year: "2019",
          value: 723.7,
        },
        {
          year: "2020",
          value: 763,
        },
        {
          year: "2021",
          value: 841.4,
        },
        {
          year: "2022",
          value: 881.6,
        },
      ];
      const xData10 = barData_10.map((item) => item.year);
      const yData10 = barData_10.map((item) => item.value);
      var option10 = {
        xAxis: {
          type: "category",
          data: xData10,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",

              fontSize: 14,
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",

              fontSize: 12,
            },
          },
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "2%",
          top: "5%",
          containLabel: true,
        },
        series: [
          {
            data: yData10,
            type: "bar",
            barCategoryGap: "60%",
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(213, 178, 114, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(31, 110, 123, 1)",
                },
              ],
            },
          },
          {
            data: yData10,
            type: "line",
            symbol: "circle", //拐点样式
            symbolSize: 6, //拐点大小
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 3,
                  color: "rgba(45, 149, 175, 1)",
                },
                color: "rgba(191, 249, 255, 1)", //拐点颜色
                borderColor: "#000000", //拐点边框颜色
                borderWidth: 0, //拐点边框大小
              },
              emphasis: {
                color: "#000000", //hover拐点颜色定义
              },
            },
          },
        ],
      };
      myChart10.setOption(option10);

      // 基于准备好的dom，初始化echarts实例
      var myChart11 = echarts.init(document.getElementById("main11"));
      var barData_11 = [
        {
          label: "主体市场",
          value: "76721",
        },
        {
          label: "各类企业",
          value: "20712",
        },
        {
          label: "个体工商户",
          value: "55613",
        },
        {
          label: "农民专业合作社",
          value: "396",
        },
      ];
      var dataSpace11 = [];
      var dataX11 = [];
      var datas11 = [];

      var total11 = parseInt(barData_11[0].value);
      for (let i = 0; i < barData_11.length; i++) {
        dataX11.push(barData_11[i].label);
        datas11.push(barData_11[i].value);
        if (i !== 0) {
          // 制作下方空白
          dataSpace11.push(total11 - parseInt(barData_11[i].value));
          total11 -= parseInt(barData_11[i].value);
        }
      }

      var option11 = {
        grid: {
          top: "10%",
          right: "5%",
          left: "12%",
          bottom: "15%",
        },
        xAxis: [
          {
            type: "category",
            data: dataX11,
            axisLine: {
              lineStyle: {
                color: "rgba(66, 192, 255, .3)",
              },
            },
            axisLabel: {
              interval: 0,
              margin: 10,
              color: "#fff",
              textStyle: {
                fontSize: 11,
              },
            },
            axisTick: {
              //刻度
              show: false,
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#fff",
              textStyle: {
                fontSize: 11,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(66, 192, 255, .3)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0)",
              },
            },
          },
        ],
        series: [
          {
            // 下方空白
            name: "Placeholder",
            type: "bar",
            stack: "Total",
            itemStyle: {
              borderColor: "transparent",
              color: "transparent",
            },
            emphasis: {
              itemStyle: {
                borderColor: "transparent",
                color: "transparent",
              },
            },
            data: dataSpace11,
          },
          {
            name: "Life Cost",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
              position: "inside",
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#107F88", // 0% 处的颜色
                  },
                  {
                    offset: 0.98,
                    color: "#107F8820", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
            data: datas11,
          },
        ],
      };
      myChart11.setOption(option11);
    </script>
  </body>
</html>
